<template> 
  <div id="header">
    <div class="header-left flex-box">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-diary-sousuo"></use>
      </svg>
    </div>
    <div class="header-nav">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide v-for="(item,index) in routers" :key="index" class="flex-box slides" :class="{slide_active:item.linkName===routeName}">
          <p><router-link :to="item.linkPath">{{item.name}}</router-link></p>
        </swiper-slide>
      </swiper>
    </div>
    <div class="header-right flex-box">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-diary-fenlei"></use>
      </svg>
    </div>
  </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'Header',
  data() {
    return {
      routers: [
        {
          name: '关注',
          linkPath: '/GuanZhu',
          linkName: 'articleGuanZhu'
        },
        {
          name: '深度好文',
          linkPath: '/',
          linkName: 'articleTuiJian'
        },
        {
          name: '记录',
          linkPath: '/SheHui',
          linkName: 'articleSheHui'
        },
        {
          name: '家庭',
          linkPath: '/JiaTing',
          linkName: 'articleJiaTing'
        },
        {
          name: '人文',
          linkPath: '/RenWen',
          linkName: 'articleRenWen'
        },
        {
          name: '感情',
          linkPath: '/GanQing',
          linkName: 'articleGanQing'
        },
        {
          name: '历史',
          linkPath: '/LiShi',
          linkName: 'articleLiShi'
        }
      ],
      routeName: 'articleTuiJian',
      swiperOption: {
        slidesPerView: 'auto',
        freeMode: true,
        // initialSlide :1,
        // centeredSlides: true,
        autoHeight: true,
        resistanceRatio: 0, // 禁止边缘抵抗
        touchAction: 'none',
        watchSlidesProgress: true,
        mousewheel: false
        // slideToClickedSlide: true
        // on: {
        //   init: function() {
        //     this.slides.removeClass('slide_active')
        //     this.slides.eq(1).addClass('slide_active')
        //   },
        //   tap: () => {
        //     this.swiperHeader.slides.removeClass('slide_active')
        //     this.swiperHeader.slides.eq(this.swiperHeader.clickedIndex).addClass('slide_active')
        //     this.swiperHeader.slideTo(this.swiperHeader.clickedIndex - 2, 1000, false)
        //   }
        // }
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  watch: {
    $route() {
      this.routeName = this.$route.name
      this.swiperHeader.slideTo(this.getIndex(this.$route.name) - 1, 500, false)
    }
  },
  computed: {
    swiperHeader() {
      return this.$refs.mySwiper.swiper
    }
  },
  created() {},
  methods: {
    getIndex(v) {
      let index = this.routers.findIndex(data => {
        return data.linkName == v
      })
      return index
    }
  },
  mounted() {
    if (this.$store.state.refreshLink) {
      this.routeName = this.$store.state.refreshLink
      this.swiperHeader.slideTo(this.getIndex(this.$route.name) - 1, 350, false)
    }
  },
  beforeDestory() {
    this.$bus.$off('refreshLink')
  }
}
</script>
<!-- eslint-disable -->
<style lang="scss" scoped>
#header {
  width: 100%;
  height: 45px;
  position: fixed;
  top: 0;
  left: 0;
  border-bottom: 1px solid rgba($color: #000000, $alpha: 0.06);
  z-index: 999;
  .swiper-container {
    width: 100%;
    height: 100%;
    background: #fff;
    .swiper-wrapper {
      width: 100%;
      height: 100%;
    }
  }
  .slides {
    height: 45px;
    font-size: 16px;
    width: auto;
    box-sizing: border-box;
    padding: 0 12px 0 12px;
    p {
      width: 100%;
      height: 100%;
      display: inline-block;
      line-height: 45px;
      box-sizing: border-box;
      border-bottom: 4px solid #fff;
      a {
        width: 100%;
        height: 100%;
        color: #aaa;
      }
    }
  }
  .slide_active {
    p {
      width: 100%;
      height: 100%;
      line-height: 45px;
      color: #333;
      display: inline-block;
      box-sizing: border-box;
      border-bottom: 4px solid #88ddf2;
      a {
        width: 100%;
        height: 100%;
        color: #333;
      }
    }
  }
  .header-left {
    width: 55px;
    height: 100%;
    background: #fff;
    font-size: 24px;
    color: #666;
    position: absolute;
    z-index: 66;
    box-shadow: 8px -2px 8px rgba($color: #fff, $alpha: 1);
    left: 0;
    top: 0;
  }
  .header-nav {
    height: 100%;
    margin-left: 55px;
    margin-right: 55px;
  }
  .header-right {
    width: 55px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background: #fff;
    z-index: 66;
    box-shadow: -8px -2px 8px rgba($color: #fff, $alpha: 1);
    font-size: 24px;
    color: #666;
  }
}
</style>
